<template>
    <div class="contenter">
        <div class="screen" ref="screen">
            <Top></Top>
            <div class="bottom">
                <div class="left">
                    <Ratio></Ratio>
                    <Ber></Ber>
                    <Age></Age>
                </div>
                <div class="center_item">
                    <Map></Map>
                    <Line></Line>
                </div>
                <div class="right">
                    <Sup></Sup>
                    <Suc></Suc>
                    <Sub></Sub>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import Top from './components/top/index.vue'
import Age from './components/age/index.vue'
import Ratio from './components/ratio/index.vue'
import Ber from './components/ber/index.vue'
import Map from './components/map/index.vue'
import Line from './components/line/index.vue'
import Sup from './components/sup/index.vue'
import Sub from './components/sub/index.vue'
import Suc from './components/suc/index.vue'
import { ref, onMounted } from 'vue'

// 获取背景图dom
let screen = ref()
// 获取背景缩放比例
function getDcale(w = 1920, h = 1080) {
    const ww = window.innerWidth / w
    const hh = window.innerHeight / h

    console.log(ww, hh);
    return hh < ww ? hh : ww
}
// 挂载时获取缩放比例
onMounted(() => {
    screen.value.style.transform = `scale(${getDcale()}) translate(-50%,-50%) `
})
// 监听浏览器视口变化调用
window.onresize = () => {
    screen.value.style.transform = `scale(${getDcale()}) translate(-50%,-50%) `
    // getDcale()
}
// 退回首页

</script>

<style scoped lang="scss">

.contenter {
    background: url(./images//bg.png) no-repeat;
    width: 100vw;
    height: 100vh;
    background-size: cover;

    .screen {
        width: 1920px;
        height: 1080px;
        // background: #587DFF;
        position: fixed;
        left: 50%;
        top: 50%;
        transform-origin: left top;
        .bottom{
            color: white;
            display: flex;
            height: calc(1080px - 40px);
            justify-content: space-evenly;
            .left{
                // background: red;
                width: 25%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                :nth-child(1){
                    // background: lime;
                }
                :nth-child(2){
                    // background: rgb(89, 150, 89);

                }
                :nth-child(3){
                    // background: rgb(206, 247, 206);

                }

            }
            .center_item{
                width: 45%;
                display: flex;
                flex-direction: column;
            }
            .right{
                width: 25%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

        }
    
    }
}</style>